<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="fooddetail">
        <el-page-header @back="goBack" content="历史发布详情">
        </el-page-header>

        <div class="eidtbody">
          <p class="titleline mb-10">参与预约的班级</p>
          <div class="addclassBox mb-20">
            <span v-for="(item,index) in classBox">{{item.class_name}}</span>
          </div>
          <p class="titleline mb-10">发布的区角</p>
          <!--<p class="foodtitle-p mb-20">{{dayTime?dayTime:''}} 当日发布的菜品</p>-->
          <div class="fooddetail-list">
            <el-table
                    ref="multipleTable"
                    :data="arryList"
                    :stripe="tableoption.tableStripe"
                    :border="tableoption.tableBorder"
                    tooltip-effect="dark"
                    style="width: 100%"
                    header-cell-class-name="table-text-c"
                    cell-class-name="table-text-c">
              <el-table-column
                      label="现场图" align="center">
                <template slot-scope="scope">
                  <div class="checkImgDialog width60 mg-auto"
                       :style="{backgroundImage:'url('+scope.row.corner.pic+')',backgroundSize:'cover',backgroundPosition:'center'}"
                       @click="viewImgDialog(scope.$index)">
                    <div class="imgpreviewBody">
                      <div class="imgpreview">
                        <i class="el-icon-view"></i>
                      </div>
                    </div>
                  </div>
                  <p class="checkview">点击预览</p>
                </template>
              </el-table-column>
              <el-table-column
                      label="区角名称" align="center">
                <template slot-scope="scope">
                  {{scope.row.corner.name}}
                </template>
              </el-table-column>
              <el-table-column
                      prop="name"
                      label="构建人" align="center">
              </el-table-column>
              <el-table-column
                      prop="count"
                      label="预约人数" align="center">
              </el-table-column>
              <el-table-column
                      prop="qualified"
                      label="合格人数" align="center">
              </el-table-column>
              <el-table-column
                      label="操作"
                      width="150" align="center">
                <template slot-scope="scope">
                  <el-button size="small" @click="showlist(scope.$index)">查看区角详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!--viewImgDialog.vue-->
      <viewImgDialog :privaImgObj="imgsrcCheck" :visible.sync="dialogImgVisible"></viewImgDialog>
    </div>
  </div>
</template>

<script>
  import drawerdetailBox from '@/components/dialog/drawerdetailBox.vue'
  import viewImgDialog from '@/components/dialog/previewImgDialog.vue'
  import {pagination, tableoption, yearDay} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    components: {
      drawerdetailBox,
      viewImgDialog
    },
    data () {
      return {
        currentDate: new Date(),
        tableoption: tableoption,
        editId: this.$route.query.id,
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: [],
        dialogDrawerVisible: false,
        dishOption: null,
        dayTime: '',
        // 预览
        imgsrcCheck: '',
        dialogImgVisible: false,
        classBox: []
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        this.$fetch(api.admin_corner_open_detail, {
          id: this.editId
        }).then((response) => {
          if (response.code === 0) {
            this.classBox = response.classes
            this.arryList = response.list
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      showlist (index) {
        this.$router.push('CornerList?id=' + this.arryList[index].open_id + '&corner_id=' + this.arryList[index].corner_id)
      },
      goBack () {
        this.$router.go(-1)
      },
      viewImgDialog (index) {
        this.imgsrcCheck = [this.arryList[index].corner.pic]
        this.dialogImgVisible = true
      }
    },
    mounted () {
    }
  }
</script>
